<template>
  <div
    id="app"
    :style="{
      '--ly-primary-color': `${themeColor}`
    }"
  >
    <!--    固定取色器-->
    <el-color-picker
      v-model="themeColor"
      show-alpha
      size="small"
      @change="handleColorChange"
    >
    </el-color-picker>
    <!--    路由页面-->
    <el-config-provider :locale="zhCn">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { localCache } from '@/utils/cache'
import { THEME_COLOR } from '@/global/constant'
// element-ui国际化
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 进来读取缓存的主题色
const themeColor = ref(localCache.getCache(THEME_COLOR) || '#2E6A7C')
onMounted(() => {
  setColors(themeColor.value)
})

// 点击更换主题色
const handleColorChange = (value) => {
  themeColor.value = value
  localCache.setCache(THEME_COLOR, value)
  // 动态添加颜色再:root里
  setColors(themeColor.value)
}

// 设置一个方法可以动态设置颜色
function setColors(color: string) {
  const props = [
    '--el-color-primary',
    '--el-color-primary-light-3',
    '--el-color-primary-light-7'
  ]
  props.forEach((prop) => {
    document.documentElement.style.setProperty(prop, color)
  })
}
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  background-color: #f3f4f6;
}

/*调色器样式*/
:deep(.el-color-picker) {
  position: fixed;
  right: 16px;
  top: 23px;
  z-index: 10;
}

:deep(.el-color-picker__trigger) {
  width: 15px;
  height: 15px;
}
</style>
